<template>
  <div class="box">
    <myDivider name="巡查码"></myDivider>
    <el-page-header @back="$router.go(-1)"></el-page-header>
    <div style="margin-top: 30px;margin-left: 70px;">
      <div style="margin: 20px 0;font-weight: 600;">
        <span>巡查类别：</span><span>{{ form.categoryName }}</span>
      </div>
      <!-- <el-form label-width="120px">
        <el-form-item label="巡查类别：">
          <span>{{ form.categoryName }}</span>
        </el-form-item>
      </el-form> -->

      <div style="margin-bottom: 80px;" v-for="item, i in form.datas" :key="i">
        
        <!-- 顶部form -->
        <el-form>
              <el-form-item label="所属小区：" label-width="85px">
                <span>{{ item.residentialInfo }}</span>
              </el-form-item>
        </el-form>

        <!-- 卡片form -->
        <div v-for="iiitem, ii in item.list" :key="ii" style="margin-top: 10px;width: 530px;">
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>巡查码{{ ii + 1 }}</span>
            </div>
            <el-form :model="iiitem" ref="cardForm" label-width="100px">
              <el-form-item label="权限负责人：" label-width="100px">
                <span>{{ iiitem.categoryResponsibleNames.join(',') }}</span>
              </el-form-item>
              <el-form-item label="名称：">
                <el-input disabled style="width: 250px;" v-model="iiitem.codeName"></el-input>
              </el-form-item>
              <el-form-item label="位置：">
                <div style="display: flex;">
                  <div style="position: relative;">
                    <div style="width: 250px;height: 100%;position: absolute;left: 0;top: 0;z-index: 10;"></div>
                    <el-input  type="textarea"
                    :rows="2" disabled style="width: 250px;" :value="iiitem.positionName"
                      placeholder="请选择位置"></el-input>
                  </div>
                  <span style="color: #4ca1e7;cursor: pointer;margin-left: 10px;"
                    @click="goLatLon(iiitem)">点击查看位置</span>
                </div>
              </el-form-item>
              <el-form-item label="位置参照图：">
                <el-image v-if="iiitem.positionUrl" style="width: 100px; height: 100px" :src="iiitem.positionUrl"
                  :preview-src-list="[iiitem.positionUrl]">
                </el-image>
                <span v-else>暂无照片</span>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </div>

    </div>




    <!-- 弹窗 -->
    <!-- 地图弹窗 -->
    <el-dialog title="选择位置" :visible.sync="mapPopShow" width="80%">
      <div class="mapStyle" id="map" v-if="mapPopShow">
        <span style="display: block;margin-bottom: 15px;font-size: 20px;font-weight: 600">{{'选择的位置：'+positionName}}</span>

        <div id="container"></div>
      </div>
    </el-dialog>




  </div>
</template>

<script>
import { Loading } from 'element-ui';
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode: "74a9bc741a93c4984284167952f22f4a",//安全密钥
};
export default {

  data() {

    return {
      positionName:'',
      form: {},
      mapPopShow: false,
      map: null,
      marker: null,
      geocoder: null,//编码
      AMap: null,

    }
  },
  async activated() {
    let res = await this.$api.patrol.myGetCodeListByCategory(this.$route.query.id)
    if (res.code == 200) {
      console.log(res, 'qwdqwdq');

      this.form = res.data
      // res.data.list.forEach(el => {
      //   el.latLon = el.longitude + ',' + el.latitude
      // });
      // this.cardForm = res.data.list
    } else {
      this.$message.error(res.message)
    }

  },
  methods: {


    goLatLon(item) {
      if (!item.longitude || !item.latitude) {
        this.$message.error('缺少经纬度')
        return
      }
      this.mapPopShow = true
      this.positionName = item.positionName
      this.$nextTick(() => {
        let loadingInstance = this.$loading({
          target: document.getElementById('map')
        })
        AMapLoader.load({
          key: "b59ffa4664995330f554d4aedc02b03c", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
          .then((AMap) => {
            this.AMap = AMap

            this.map = new AMap.Map("container", {
              // viewMode: "3D", // 是否为3D地图模式
              zoom: 15, // 初始化地图级别
              center: [item.longitude,item.latitude], // 初始化地图中心点位置
            });
            this.map.on('complete', () => { //地图加载完毕函数
              this.geocoder = new this.AMap.Geocoder()
              loadingInstance.close();
              this.marker = new this.AMap.Marker({ //创建点标点
                position: [item.longitude,item.latitude],
              });
              this.map.add(this.marker);    //添加点标点

            });
          })
          .catch((e) => {
            console.log(e);
          });


      })
    },
  }
}
</script>

<style lang="less" scoped>
.residentialPopStyle {
  .listStyle {
    display: flex;
    flex-wrap: wrap;
    height: 200px;
    overflow-y: scroll;
    margin-top: 50px;

    &::-webkit-scrollbar {
      width: 2px !important;

      &-thumb {
        background-color: rgb(45, 180, 234);
      }
    }
  }
}

.mapStyle {
  height: 65vh;
  width: 100%;

  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 90%;
  }
}

.stepStyle {
  display: flex;
  justify-content: space-between;
  width: 433px;
  margin: auto;

  .stepElStyle {
    cursor: pointer;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;

    >div {
      width: 30px;
      height: 30px;
      border-radius: 100px;
      // background-color: #4095e5;
      border: 1px solid black;
      display: flex;
      justify-content: center;
      align-items: center;

      >span {
        color: rgb(0, 0, 0);

      }
    }

    >span {
      margin-top: 5px;
    }

    &.active {
      >div {

        background-color: #4095e5;
        border: 1px solid #4095e5;

        >span {
          color: rgb(255, 255, 255);

        }
      }
    }
  }
}
</style>